<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>尚品汇 结算页</title>
    <link rel="stylesheet" type="text/css" href="/css/all.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-getOrderInfo.css" />
	<div th:include="common/head :: head"></div>
</head>

<body>
	<!--head-->
	<!-- 头部栏位 -->
	<div th:include="common/header :: header"></div>


	<div class="cart py-container" id="item">
		<!--主内容-->
		<div class="checkout py-container">
			<div class="checkout-tit">
				<h4 class="tit-txt">填写并核对订单信息</h4>
			</div>
			<div class="checkout-steps">
				<!--收件人信息-->
				<div class="step-tit">
					<h5>收件人信息<span></span></h5>
				</div>
				<div class="step-cont">
					<div class="addressInfo">
						<ul class="addr-detail">
							<li class="addr-item">

								<div class="choose-address" v-for="userAddress in userAddressList" :key="userAddress.id">
									<div class="con name" :class="{'selected':userAddress.selected == 1}" @click="selectAddress(userAddress.id)">
										<a href="javascript:;" ><em>{{userAddress.consignee}}</em></a>
									</div>
									<div class="con address">
										<span class="place">{{userAddress.userAddress}}</span>
										<span class="phone">{{userAddress.phoneNum}}</span>
										<span class="base" v-if="userAddress.isDefault == 1">默认地址</span>
									</div>
									<div class="clearfix"></div>
								</div>

							</li>
						</ul>
						 <!--确认地址-->
					</div>
				</div>
				<div class="hr"></div>
				<!--支付和送货-->
				<div class="payshipInfo">
					<div class="step-tit">
						<h5>支付方式</h5>
					</div>
					<div class="step-cont">
						<ul class="payType">
							<li class="selected" typeValue="ONLINE">在线支付<span title="点击取消选择"></span></li>
							<li typeValue="OUTLINE">货到付款<span title="点击取消选择"></span></li>
							<input type="hidden" id="payType" value="1">
						</ul>
					</div>
					<div class="hr"></div>
					<div class="step-tit">
						<h5>送货清单</h5>
					</div>
					<div class="step-cont">
						<ul class="send-detail">
							<li>
								<div class="sendType">
									<span>配送方式：</span>
									<ul>
										<li>
											<div class="con express">天天快递</div>
											<div class="con delivery">配送时间：预计8月10日（周三）09:00-15:00送达</div>
										</li>
									</ul>
								</div>
								<div class="sendGoods">
									<span>商品清单：</span>
									<ul class="yui3-g"  th:each="detail: ${detailArrayList}">
										<li class="yui3-u-1-6">
											<span><img th:src="${detail.imgUrl}" width="100"/></span>
										</li>
										<li class="yui3-u-7-12">
											<div class="desc" th:text="${detail.skuName}">{{item.skuName}}</div>
											<div class="seven">7天无理由退货</div>
										</li>
										<li class="yui3-u-1-12">
											<div class="price" th:text="'￥'+${detail.orderPrice}">￥{{item.orderPrice}}</div>
										</li>
										<li class="yui3-u-1-12">
											<div class="num" th:text="'X'+${detail.skuNum}">{{item.skuNum}}</div>
										</li>
										<li class="yui3-u-1-12">
											<div class="exit">有货</div>
										</li>
									</ul>

								</div>
								<div class="buyMessage">
									<span>买家留言：</span>
									<textarea placeholder="建议留言前先与商家沟通确认" class="remarks-cont"></textarea>
								</div>
							</li>
							<li></li>
							<li></li>
						</ul>
					</div>
					<div class="hr"></div>
				</div>

				<div class="linkInfo">
					<div class="step-tit">
						<h5>发票信息</h5>
					</div>
					<div class="step-cont">
						<span>普通发票（电子）</span>
						<span>个人</span>
						<span>明细</span>
					</div>
				</div>
				<div class="cardInfo">
					<div class="step-tit">
						<h5>使用优惠/抵用</h5>
					</div>
				</div>
			</div>
		</div>
		<div class="order-summary">
			<div class="static fr">
				<div class="list">
					<span><i class="number" th:text="${totalNum}">1</i>件商品，总商品金额</span>
					<em class="allprice" th:text="'￥'+${totalAmount}">¥0</em>
				</div>
				<div class="list">
					<span>返现：</span>
					<em class="money">0.00</em>
				</div>
				<div class="list">
					<span>运费：</span>
					<em class="transport">0.00</em>
				</div>
			</div>
		</div>
		<div class="clearfix trade">
			<div class="fc-price">应付金额:　<span class="price" th:text="'￥'+${totalAmount}">¥0</span></div>
			<div class="fc-receiverInfo">寄送至:
				<span id="receive-address">{{order.deliveryAddress}}</span>
				收货人：<span id="receive-name">{{order.consignee}}</span>
				<span id="receive-phone">{{order.consigneeTel}}</span>
			</div>
		</div>
		<div class="submit">
			<a class="sui-btn btn-danger btn-xlarge" href="javascript:;" @click="submitOrder()">提交订单</a>
		</div>
	</div>
	<!-- 底部栏位 -->
	<!--页面底部-->
<div class="clearfix footer">
	<div class="py-container">
		<div class="footlink">
			<div class="clearfix Mod-list">
				<div class="yui3-g">
					<div class="yui3-u-1-6">
						<h4>购物指南</h4>
						<ul class="unstyled">
							<li>购物流程</li>
							<li>会员介绍</li>
							<li>生活旅行/团购</li>
							<li>常见问题</li>
							<li>购物指南</li>
						</ul>

					</div>
					<div class="yui3-u-1-6">
						<h4>配送方式</h4>
						<ul class="unstyled">
							<li>上门自提</li>
							<li>211限时达</li>
							<li>配送服务查询</li>
							<li>配送费收取标准</li>
							<li>海外配送</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>支付方式</h4>
						<ul class="unstyled">
							<li>货到付款</li>
							<li>在线支付</li>
							<li>分期付款</li>
							<li>邮局汇款</li>
							<li>公司转账</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>售后服务</h4>
						<ul class="unstyled">
							<li>售后政策</li>
							<li>价格保护</li>
							<li>退款说明</li>
							<li>返修/退换货</li>
							<li>取消订单</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>特色服务</h4>
						<ul class="unstyled">
							<li>夺宝岛</li>
							<li>DIY装机</li>
							<li>延保服务</li>
							<li>尚品汇E卡</li>
							<li>尚品汇通信</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>帮助中心</h4>
						<img src="./img/wx_cz.jpg">
					</div>
				</div>
			</div>
			<div class="Mod-copyright">
				<ul class="helpLink">
					<li>关于我们<span class="space"></span></li>
					<li>联系我们<span class="space"></span></li>
					<li>关于我们<span class="space"></span></li>
					<li>商家入驻<span class="space"></span></li>
					<li>营销中心<span class="space"></span></li>
					<li>友情链接<span class="space"></span></li>
					<li>关于我们<span class="space"></span></li>
					<li>营销中心<span class="space"></span></li>
					<li>友情链接<span class="space"></span></li>
					<li>关于我们</li>
				</ul>
				<p>地址：北京市昌平区宏福科技园综合楼6层</p>
				<p>京ICP备19006430号</p>
			</div>
		</div>
	</div>
</div>
<!--页面底部END-->
<!--页面底部END-->
<script src="/js/api/trade.js"></script>
<script th:inline="javascript">
	var item = new Vue({
		el: '#item',

		data: {
            userAddressList: [[${userAddressList}]],
            tradeNo: [[${tradeNo}]],

            order: {
                consignee:'',
                consigneeTel: '',
                deliveryAddress:'',
                paymentWay:'ONLINE',
                orderComment:'',
                orderDetailList:[[${detailArrayList}]]
            }
		},

        created() {
            this.init()
        },

        methods: {
            init() {
                debugger
                this.userAddressList.forEach((item) => {
                    item.selected = 0
                    if(item.isDefault == 1) {
                        item.selected = 1
                        this.order.consignee = item.consignee
                        this.order.consigneeTel = item.phoneNum
                        this.order.deliveryAddress = item.userAddress
                    }
                })
            },

            submitOrder() {
                trade.submitOrder(this.order, this.tradeNo).then(response => {
                    // debugger
                    if (response.data.code == 200) {
                        window.location.href = 'http://payment.gmall.com/pay.html?orderId=' + response.data.data
                    } else {
                        alert(response.data.message)
                    }

                })
            },

            selectAddress(addressId) {
                debugger
                this.userAddressList.forEach((item) => {
                    if(item.id == addressId) {
                        item.selected = 1

                        this.order.consignee = item.consignee
                        this.order.consigneeTel = item.phoneNum
                        this.order.deliveryAddress = item.userAddress
                        this.order.paymentWay = this.paymentWay
                    } else {
                        item.selected = 0
                    }
                })
            },

            selectPaymentWay(paymentWay) {
                this.order.paymentWay = paymentWay
            }
        }
	})
</script>

</body>

</html>
